<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Bike Map</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
<style>
	.img-source{cursor:pointer;}
	.map-wrapper{position:relative; background-color:black; font-family: Verdana,Arial,Tahoma,sans-serif; width:814px; height:459px;}
	.map-part{opacity:0.5; position:absolute; border:1px dashed white; background: url("images/map/transparent.gif") repeat scroll 0 0 transparent;}/*dont remove background, itis hack for ie mouseenter event*/
	.map-intro{
		width:300px;
		background-color: #003366;
		color: white;
		left: 70%;
		padding: 2px;
		position: absolute;
		top: 30%;
		font-size:12px;
		display:none;
	}
	.map-intro *{ margin:0; padding:0; z-index:-1000}
	.map-intro .title{
		background-color: #4477AA;
		margin-bottom: 1px;
		padding:5px;
		font-size:13px;
		font-weight:bold;
	}
	.map-intro .content{
		background-color: #6699CC;
		color:black;
		padding:3px 3px 1px 3px;
	}
	.map-intro img{border:0 none; padding-right:3px;}
	.map-intro a.seemore:hover{color:yellow}
</style>
<script>
	$(document).ready(function(){
		$('.map-wrapper').mouseenter(hoverWrapperIn);
		$('.map-wrapper').mouseleave(hoverWrapperOut);
		$('.map-part').mouseenter(hoverIn);
		$('.map-part').mouseleave(hoverOut);
		$('.img-source').click(function(){
			var imgId = this.id;
			var imgIdIndex = imgId.substring(imgId.indexOf('-') + 1);
			var mapWrapperId = 'map-wrapper-' + imgIdIndex;
			$("div[id^='map-wrapper-']").hide();
			$('#' + mapWrapperId).show();
		});
		// for find coordinate BEGIN
		$(".map-wrapper").click(function(e){
			var relativeX = e.pageX - this.offsetLeft;
			var relativeY = e.pageY - this.offsetTop;
			debug('\n x=' + relativeX);
			debug('\n y=' + relativeY);
		});
		// for find coordinate END
	});
	function hoverWrapperIn(){
		debug('wrapper-in');
		$(this).find('.map-part').each(function(){
			$(this).css({'opacity':'1.0', 'border':'1px dashed white'});
		});
	}
	function hoverWrapperOut(){
		debug('wrapper-out');
		$(this).find('.map-part').each(function(){
			$(this).css({'opacity':'0.5'});
		});
	}
	function hoverIn(){
		debug('in');
		$(this).css('border','2px dashed yellow');
		$(this).find('.map-intro').each(function(){
			$(this).css({'display':'block', 'z-index':'1000'});
		});
	}
	function hoverOut(){
		debug('out');
		$(this).css({'border':'1px dashed white'});
		$(this).find('.map-intro').each(function(){
			$(this).css({'display':'none', 'z-index':'-1000'});
		});
	}
	function debug(message){
		$('#debug').val($('#debug').val() + "," + message);
	}
	
</script>
</head>
<body>
<h1>Bike Map</h1>
<table>
<tr>
	<td style="width:150px">
		<!-- gallery BEGIN ================================================================= -->
		<img class="img-source" id="img-1" src="images/screen-capture-139.jpg" style="width:150px; height:100px" />
		<img class="img-source" id="img-2" src="images/screen-capture-138.jpg" style="width:150px; height:100px" />
		<img class="img-source" id="img-3" src="images/screen-capture-137.jpg" style="width:150px; height:100px" />
		<!-- gallery BEGIN ================================================================= -->
	</td>
	<td>
		<!-- map BEGIN ====================================================================== -->
		<div class="map-wrapper" id="map-wrapper-1" style="display:block">
			<img src="images/screen-capture-139.jpg" style="width:100%; height:100%">

			<div class="map-part" style="left:93px; top:182px; width:190px; height:150px;">
				<div class="map-intro">
					<div class="title" id="map-title">
					Mustang Seats Two-Piece Studded Wide Touring Seat w/Driver Backrest - VT750 Aero (04 and newer)
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">M-79390</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$699.00</span></p>
									<p id="intro">LINDBY CUSTOM INC., brings you ground breaking innovations and fascinating design...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="map-part" style="left:263px; top:209px; width:200px; height:160px; ">
				<div class="map-intro">
					<div class="title" id="map-title">
					Motorcycle carburetor
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">M-79390</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$699.00</span></p>
									<p id="intro">LINDBY CUSTOM INC., brings you ground breaking innovations and fascinating design...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="map-part" style="left:253px; top:77px; width:110px; height:60px; ">
				<div class="map-intro">
					<div class="title" id="map-title">
						Kuryakyn Wide Style Lever Set - Honda Models with CABLE OPERATED Clutch
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">KY-7421</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$39.99</span></p>
									<p id="intro">These chrome levers are wider and more comfortable than stock. Replace your stoc...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="map-part" style="left:172px; top:98px; width:95px; height:60px; ">
				<div class="map-intro">
					<div class="title" id="map-title">
						Kuryakyn ISO-Grips - 1 inch Bars (Honda and Suzuki)
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">KY-7421</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$39.99</span></p>
									<p id="intro">Now, just about any popular cruiser can be fit with the incredibly comfortable K...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="map-part" style="left:131px; top:20px; width:110px; height:70px; ">
				<div class="map-intro">
					<div class="title" id="map-title">
						Motorcycle mirror
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">KY-7421</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$39.99</span></p>
									<p id="intro">Now, just about any popular cruiser can be fit with the incredibly comfortable K...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>	
		</div>
		<!-- map END ====================================================================== -->
		
		<!-- map BEGIN ====================================================================== -->
		<div class="map-wrapper" id="map-wrapper-2" style="display:none">
			<img src="images/screen-capture-138.jpg" style="width:100%; height:100%">

			<div class="map-part" style="left:280px; top:81px; width:230px; height:140px;">
				<div class="map-intro">
					<div class="title" id="map-title">
					Mustang Seats Two-Piece Studded Wide Touring Seat w/Driver Backrest - VT750 Aero (04 and newer)
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">M-79390</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$699.00</span></p>
									<p id="intro">LINDBY CUSTOM INC., brings you ground breaking innovations and fascinating design...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="map-part" style="left:342px; top:322px; width:250px; height:70px; ">
				<div class="map-intro">
					<div class="title" id="map-title">
					Motorcycle carburetor
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">M-79390</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$699.00</span></p>
									<p id="intro">LINDBY CUSTOM INC., brings you ground breaking innovations and fascinating design...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- map END ====================================================================== -->
		
		<!-- map BEGIN ====================================================================== -->
		<div class="map-wrapper" id="map-wrapper-3" style="display:none">
			<img src="images/screen-capture-137.jpg" style="width:100%; height:100%">

			<div class="map-part" style="left:299px; top:279px; width:100px; height:100px;">
				<div class="map-intro">
					<div class="title" id="map-title">
					 Bike monitor
					</div>
					<div class="content">
						<table>
						<tr>
							<td>
								<a href="#"><img src="http://www.cruisercustomizing.com/images/image_14194_100.jpg" id="map-img" /></a></td>
							<td>
								<div>
									<p><span style="font-weight:bold">Part</span> <span id="part">M-79390</span></p>
									<p><span style="font-weight:bold">MSRP</span> <span id="msrp">$699.00</span></p>
									<p id="intro">LINDBY CUSTOM INC., brings you ground breaking innovations and fascinating design...</p>
									<p><a href="#" class="seemore">see more</a></p>
								</div>
							</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- map END ====================================================================== -->
	</td>
</tr>
</table>
<textarea id="debug" style="width:700px; height:300px; display:none"></textarea>
</body>
</html>
